 $wrap: 1100px;

 .wrapper {
   width: $wrap;
   margin: 0 auto;
 }

 // -1颜色
 $color: #999;



 // 1.导航栏
 .nav {
   width: 100%;
   height: 30px;
   background: #000;
   border-bottom: 1px solid #ededee;
   color: #999;

   .wrapper {
     width: $wrap;
     display: flex;
     margin: 0 auto;
     line-height: 30px;
     color: #999;

     .topNavLeft {
       width: 193px;

       .navAdmit,
       .navReg {
         margin-left: 16px;
         color: #999;
       }
     }

     .topNavLeft2 {
       width: 78px;
       height: 30px;
       padding-left: 30px;

       .iphone {
         color: #999;
       }
     }

     // 2.导航栏二级导航的简单封装
     @mixin Drop {
       display: flex;
       flex-direction: column;
       position: absolute;
       left: -1px;
       top: 30px;
       width: 100px;
       background-color: #fff;
       border: 1px solid #e8e8ea;
       border-top: 0;
       padding: 4px 0px 12px 14px;
       display: none;
       z-index: 6;
     }

     .topNavRight {
       width: 690px;
       height: 30px;
       margin-left: 100px;
       display: flex;
       justify-content: space-between;

       li {
         a {
           color: #999;
         }
       }

       // 2.1个人中心
       .person {
         position: relative;

         .common {
           position: relative;
           border: 1px solid transparent;
           left: -3px;
           top: -1px;

           .p1 {
             color: #999;
           }

           .myDrop {
             @include Drop;

             .p2 {
               height: 28px;
               display: block;

               .icon-triangle-down {
                 display: inline-block;
                 transition: all 0.5s;
               }

             }
           }

           &:hover {
             background-color: #fff;
             cursor: pointer;
             border: 1px solid transparent;

             .p1 {
               color: rgb(255, 30, 50);
             }

             .myDrop {
               display: block;
             }
           }
         }
       }

       // 2.2客户服务
       .serve {
         @extend .person;
       }

       // 2.3充值中心
       .charge {
         @extend .person;
       }

       // 2.4 消费者权益
       .sumber {
         @extend .person;
       }

       // 2.5更多
       .more {
         @extend .person;
       }
     }
   }
 }

 // 2.header
 .header {
   width: 100%;
   background-color: #fff;
   position: relative;

   .wrapper {
     min-height: 100px;
     display: flex;
     align-items: center;

     .logo {
       width: 330px;
       height: 65px;
       display: inline-block;
       background-image: url(http://kaola-haitao.oss.kaolacdn.com/f69c45fd-8d91-4e18-8e3f-a546be302a12.png);
       background-repeat: no-repeat;
       background-size: auto 65px;
     }

     .h_search {
       width: 510px;
       height: 36px;
       padding-left: 10px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       border: 2px solid #ff2337;
       border-radius: 40px;
       position: relative;

       input {
         width: 410px;
         height: 24px;
         line-height: 24px;
         border: 0;
         font-size: 13px;
         vertical-align: middle;
       }

       .h_car {
         width: 60px;
         height: 34px;
         line-height: 34px;
         background: #ff2337;
         background-image: linear-gradient(270deg, #ff2e64, #ff0003);
         border-radius: 40px;
         text-align: center;
         align-self: flex-end;
         cursor: pointer;
         position: absolute;
         top: -1px;
         right: -2px;

         .iconfont {
           font-size: 20px;
           color: #fff;

         }
       }
     }

     .car {
       display: block;
       width: 106px;
       height: 36px;
       background-color: #fff;
       line-height: 36px;
       font-size: 14px;
       text-align: center;
       border-radius: 36px;
       border: 2px solid #ff1e32;
       margin-left: 30px;
       font-size: 14px;

       .icon-gouwuche-xuanzhong {
         font-size: 20px;
         color: #ff1e32;
         vertical-align: middle;
       }
     }

   }
 }

 // 3.tabBox
 .tabBox {
   width: 100%;
   border-bottom: 1px solid #ccc;
   background: #fff;
   position: relative;
   z-index: 10;

   .wrapper {
     min-height: 40px;
     display: flex;
     align-items: center;

     // 左边
     .topCats {
       height: 40px;
       line-height: 40px;
       width: 164px;
       border-bottom: 1px solid #ff5160;
       background: linear-gradient(90deg, red, #ff3264);
       color: #fff;
       font-size: 14px;
       text-align: left;
       position: relative;

       // 左边的上面
       .topLevel {
         .icon-gengduo-2 {
           font-size: 16px;
           margin: 0 10px 0 15px;
           vertical-align: middle;
         }
       }

       .topList {
         li {
           color: #fff;
           text-align: left;
           font-size: 14px;
           background-color: #ff0003;
           cursor: pointer;
           border: 1px solid #999;
           border-top: none;

           .iconfont {
             font-size: 16px;
             margin: 0 10px 0 15px;
             vertical-align: middle;
           }

           // banner上面的盒子
           .list_right {
             position: absolute;
             top: 40px;
             left: 165px;
             width: 630px;
             height: 505px;
             padding: 0px 15px;
             background-color: #fff;
             z-index: 6;
             display: none;


             .mask_top {
               .des_top {
                 display: flex;
                 height: 34px;
                 border-bottom: 1px solid #999;

                 h2 {
                   color: #333;
                   font-size: 14px;
                   flex: 1;
                 }
               }

               .des_sort {
                 display: flex;
               }

               .sort_left,
               .sort_right {
                 flex: 1;
                 padding-right: 20px;
               }

             }

             // 中间
             .mask_center {
               .des_center {
                 display: flex;
                 height: 34px;
                 border-bottom: 1px solid #999;

                 h2 {
                   color: #333;
                   font-size: 14px;
                   flex: 1;
                 }
               }

               .des_sort1 {
                 display: flex;
               }

               .sort1_left,
               .sort1_right {
                 flex: 1;
                 padding-right: 20px;
               }

             }

             // mask下面
             .mask_bottom {
               .des_bottom {
                 display: flex;
                 height: 34px;
                 border-bottom: 1px solid #999;

                 h2 {
                   color: #333;
                   font-size: 14px;
                   flex: 1;
                 }
               }

               .des_sort2 {
                 display: flex;
               }

               .sort2_left,
               .sort2_right {
                 flex: 1;
                 padding-right: 20px;
               }

             }
           }

           &:hover {
             background-color: #fff;
             color: #ff1e32;

             .list_right {
               display: block;
               border: 1px #ff0003 solid;
               border-left: none;
             }
           }

         }
       }


     }

     // 右边
     .topUl {
       display: flex;
       width: 600px;
       padding-left: 40px;
       justify-content: space-between;

       li {
         a {
           font-weight: 700;
         }

         &:hover a {
           color: #ff1e32;
         }
       }


     }

   }

 }


 //5.底部1
 .footer {
   width: 100%;
   min-height: 216px;
   background-color: #fff;

   .wrapper {
     padding: 45px 0 45px;

     ul {
       display: flex;

       &:last-child {
         img {
           display: block;
         }

       }

       li {
         margin-right: 40px;



         dt {
           font-weight: 900;
           margin-bottom: 10px;
         }

         dd {
           margin-bottom: 10px;
         }

       }
     }

     .footer_logo {
       a {
         display: block;
         margin-bottom: 20px;
         cursor: pointer;

         img {
           width: 220px;
           height: 43px;
         }
       }

       .focuson {
         width: 218px;
         height: 32px;
         margin-bottom: 20px;

         .iconfont {
           font-size: 32px;
           vertical-align: middle;
         }

         .icon-25 {
           color: red;
           margin-left: 16px;
         }

         .icon-27 {
           color: green;
           margin-left: 16px;
         }

       }

       .report {
         margin-bottom: 20px;
       }


     }
   }



 }

 // 6.底部2
 .footerTwo {
   width: 100%;
   background: #333;

   .wrapper {
     padding: 20px 0;
     min-height: 156px;
     line-height: 26px;
     text-align: center;
     color: #c2c2c2;
     padding-left: 60px;

     span {
       margin-left: 20px;
     }

     .copy_bottom {
       img {
         vertical-align: middle;
       }

       .quality {
         margin-left: 6px;
       }

     }

     .copy_img {
       margin-top: 8px;

       img {
         display: inline-block;
         height: 30px;
         margin-right: 6px;
       }
     }
   }
 }